<template>
  <div>
    <n-form
        ref="formRef"
        :model="form"
        label-placement="left"
        :label-width="160"
        :style="{
        maxWidth: '640px'
      }"
    >
      <n-form-item label="照片上传">
        <n-upload @update:file-list="handleFileChanged" :show-file-list="false">
          <n-button>上传文件</n-button>
        </n-upload>
      </n-form-item>
      <n-form-item label="匹配分数阈值" feedback="人脸匹配分数阈值，范围：[0,100]：默认50">
        <n-slider :min="0" :max="100" v-model:value="form.confidenceThreshold" />
      </n-form-item>
      <n-form-item label="质量分数阈值" feedback="人脸质量分数阈值,范围：[0,100]：默认0。当设置为0时，会默认使用当前模型的默认值，该方法为推荐使用方式	">
        <n-slider :min="0" :max="100" v-model:value="form.faceScoreThreshold" />
      </n-form-item>
      <n-form-item label="最大人脸数">
        <n-slider :min="1" :max="100" v-model:value="form.maxFaceNum" />
      </n-form-item>
      <n-form-item label="最大搜索条数">
        <n-slider :min="1" :max="100" v-model:value="form.limit" />
      </n-form-item>
    </n-form>
    <n-space justify="center">
      <n-button type="primary" @click="handleSearch">
        <template #icon>
          <n-icon>
            <search-icon />
          </n-icon>
        </template>
        搜索
      </n-button>
    </n-space>
    <n-card title="结果预览" style="margin-top: 10px;">
      <draw-rects-image v-if="faces" :results="faces" :face-image="previewImage"/>
<!--      <face-result v-for="(face, index) in faces" :key="index" :result="face" :face-image="previewImage"/>-->
<!--      <img :src="previewImage" v-if="previewImage" style="max-width: 100%; height: auto" />-->
    </n-card>
  </div>
</template>

<script>
import {useSystemStore} from "@store/system";
import {searchService} from "@api/service";
import {BlobToDataURL} from "@util";
import DrawRectsImage from "@component/common/DrawRectsImage";
import { Search as SearchIcon } from "@vicons/ionicons5";

const system = useSystemStore();

export default {
  name: "SearchService",
  components: { SearchIcon, DrawRectsImage },
  data() {
    return {
      form: {
        namespace: system.namespace,
        collectionName: system.collection,
        confidenceThreshold: 50,
        faceScoreThreshold: 0,
        imageBase64: null,
        limit: 5,
        maxFaceNum: 5,
      },
      faces: null,
      previewImage: null,
    }
  },
  methods: {
    handleSearch () {
      $uiMsg.loading("正在搜索...");
      searchService(this.form).then((res) => {
        this.faces = res.data.data;
      }).finally(() => {
        $uiMsg.removeMessage();
      });
    },
    handleFileChanged (files) {
      if (files.length === 0) return;
      this.previewImage = null;
      this.faces = null;
      const file = files[files.length-1].file;
      BlobToDataURL(file, (base64Url) => {
        this.previewImage = base64Url;
        let b64split = base64Url.split(',')
        base64Url = b64split[1]
        this.form.imageBase64 = base64Url;
        this.handleSearch();
      });
    }
  }
}
</script>

<style scoped>

</style>
